<template>
	<view class="content">
		<view class="content">
			<view v-if="expense.length">
				<billcard v-for="(item ,index) in expense" :key="index" :it="item" @morebtn="morebtn"></billcard>		
			</view>
			<image class="add" src="/static/img/add.png" @click="add()"></image>
		</view>
	</view>
</template>

<script>
import billcard from '@/components/expense.vue'; 
	export default {
		components: {
			billcard
		},
		data() {
			return {
				expense:[],
				token:""
			}
		},
		onLoad() {
			uni.getStorage({
				key:'token',
				success: res=>{
					// console.log(res.data);
					this.token=res.data;
					this.loadList();
				}
			})
			
		},
		methods: {
			loadList(){
				this.expense=[];
				uni.request({
					url:'http://8.130.170.106:9999/expense/loadList',
					header:{
						token:this.token
					},
					success: (res) => {
						// console.log(res.data[0]);
						res.data.forEach((item,index) => {
							this.expense.push({
								expenseId: item.expenseId,
								userId: item.userId,
								expenseCategory: item.expenseCategory,
								expenseAmount: item.expenseAmount,
								expenseDate: item.expenseDate,
								expenseDescription: item.expenseDescription
							});
							console.log(this.expense[index]);
						})
						
					}
				})
			},
			add(){
			  uni.navigateTo({
			    url:'/pages/main/tabbar-3-detial/tabbar-3-expense/insert',
			    success: () => {
			      console.log("跳转成功");
			    },
			    fail: (err) => {
			      console.log("跳转失败", err);
			    }
			  });
			}
		}
	}
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
		margin-top: 20px;
	}
	.add{
		position: absolute;
		width: 50px;
		height: 50px;
		right: 10px; /* 距离右侧的距离 */
		bottom: 10px; /* 距离底部的距离 */		
	}
</style>
